import "./Login.scss";
import { Card, Form, Input, Button, message } from "antd";
import { EyeInvisibleOutlined, EyeTwoTone } from "@ant-design/icons";
import logo from "../pictures/logo.png";
import React from "react";
import { useDispatch } from "react-redux";
import { fetchLogin } from "../utils/Login/store/modules/user";
import { useNavigate } from "react-router-dom";

const Login = () => {
	const dispatch = useDispatch();
	const navigate = useNavigate();
	const onFinish = async (values) => {
		console.log(values);
		// 触发异步action fetchLogin
		await dispatch(fetchLogin(values));
		// 1. 跳转到个人页面
		navigate("/profile/1");
		// 2.提示以下用户
		message.success("登录成功");
	};

	return (
		<div className="login">
			<Card className="login-container">
				<img className="login-logo" src={logo} alt="" />
				<h2 className="login-title">知识学爆</h2>
				{/* 登录表单 */}
				<Form onFinish={onFinish} validateTrigger="onBlur">
					<Form.Item
						name="mobile"
						//多条校验，第一条通过后再校验第二条
						rules={[
							{
								required: true,
								message: "请输入手机号!",
							},
							{
								pattern: /^\d{11}$/,
								//11位数字
								message: "请输入正确的手机号格式",
							},
						]}
					>
						<Input size="large" placeholder="请输入手机号" />
					</Form.Item>
					<Form.Item
						name="code"
						rules={[
							{
								required: true,
								message: "请输入验证码!",
							},
							{
								pattern: /^\d{6}$/,
								//6位数字
								message: "请输入正确的验证码格式",
							},
						]}
					>
						<Input.Password
							size="large"
							placeholder="请输入验证码"
							iconRender={(visible) => (visible ? <EyeTwoTone /> : <EyeInvisibleOutlined />)}
						/>
					</Form.Item>
					<Form.Item>
						<Button type="primary" htmlType="submit" size="large" block>
							登录
						</Button>
					</Form.Item>
				</Form>
			</Card>
		</div>
	);
};

export default Login;
